.class-container {
	&-header {
		background-color: #ffffff;
		border-bottom: 2rpx solid $u-border-color;
		padding: 24rpx 32rpx;
	}

	.list {
		padding: 0 32rpx;
		.item {
			background-color: #fff;
			margin-top: 32rpx;
			border-radius: 16rpx;
			box-shadow: $cc-shadow;
			overflow: hidden;

			&-top {
				min-height: 96rpx;
				padding: 0 24rpx;

				&-left {
					color: #fff;
					flex: 1;
					font-weight: 500;
					font-size: 32rpx;
				}
				.class-status {
					padding: 6rpx 24rpx;
					border-radius: 16rpx;
					background: rgba(255, 255, 255, 0.1);
					color: #fff;
				}
			}

			&-content {
				padding: 16rpx 24rpx;

				.class-name {
					font-weight: 500;
					font-size: 32rpx;
					margin-bottom: 16rpx;
				}

				.progress {
					margin-bottom: 24rpx;
				}
			}

			&-info {
				display: flex;
				flex-direction: column;
				.font-info {
					margin-bottom: 8rpx;
				}
			}

			&-bottom {
				padding: 12rpx 24rpx 24rpx;
			}
		}
	}
}
